<template>
  <page-container title="人员管理">
    <!-- -------------搜索表单区域 ----------------->
    <el-form inline>
      <el-form-item label="搜索:">
        <el-input style="width: 240px" placeholder="手机号" v-model="parameter.phone" />
        <el-input style="width: 240px" placeholder="昵称" v-model="parameter.nickname" />
      </el-form-item>
      <el-form-item label="状态:">
        <el-select v-model="parameter.status" placeholder="状态" style="width: 240px" @change="personalInformation">
          <el-option v-for="(item, index) in options" :key="index" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="personalInformation">查询</el-button>
        <el-button type="success" plain @click="dialog.open()">新增</el-button>
        <el-button type="danger" plain @click="deleteFun">删除</el-button>
      </el-form-item>
    </el-form>
    <!-- -----------------表格----------------- -->
    <el-table :data="filterTableData" border size="large" row-key="id" style="width: 100%" stripe
              @selection-change="handleSelectionChange" v-loading="loading" class="manager-table">
      <el-table-column type="selection" width="50" fixed />
      <el-table-column label="人员姓名" prop="nickname" width="120" />
      
     
      <el-table-column label="邮箱" prop="email" width="150" show-overflow-tooltip />
      <el-table-column label="手机号" prop="phone" width="130" show-overflow-tooltip />
      <el-table-column label="状态" prop="is_active" width="150">
        <template #default="scope">
          <el-switch v-model="scope.row.status" active-value="0" inactive-value="1" active-text="正常" inactive-text="禁用"
                     @change="handleStatusChange(scope.row)" />
        </template>
      </el-table-column>
      <el-table-column label="备注" prop="remark" />
      
      <el-table-column label="创建时间" prop="crate_time" width="120" show-overflow-tooltip />
      <el-table-column label="修改时间" prop="update_time" width="120" show-overflow-tooltip />
      <el-table-column label="操作" fixed="right">
        <template #default="scope">
          <el-button circle plain type="danger" :icon="Delete" @click="deleteManager(scope.row)"></el-button>
          <el-button circle plain type="primary" :icon="Edit"  @click="dialog.openURole(scope.row.id)"></el-button>
        </template>
      </el-table-column>
      <template #empty>
        <el-empty description="没有数据"></el-empty>
      </template>
    </el-table>
    <!-- ------------ 分页区 -------------->
    <el-pagination v-model:current-page="parameter.page" v-model:page-size="parameter.size"
                   :page-sizes="[10, 20, 30, 50]" :background="true" layout="total, sizes, prev, pager, next,jumper"
                   @size-change="onSizeChange" :total="total" @current-change="onCurrentChange"
                   style="margin-top: 5vh; justify-content: flex-end" size />
    <channel-edit ref="dialog"  @success="onSuccess"></channel-edit>
  </page-container>

</template>

<script  setup>
import { ref } from 'vue'
import { listPageManager, updateLoserManager, deleteLoserManager } from '../../../api/sys/manager'
import { ElMessage, ElMessageBox } from "element-plus";
import { Delete,Edit } from '@element-plus/icons-vue'

const dialog = ref()



//  查询条件
const parameter = ref({
  page: 1,//当前页码
  size: 10,//每页记录数
  status: '0',//状态  0：启用   1：禁用 
  phone: '',
  nickname: '',
})


/* ------------------查询/获取人员信息------------------- */
const loading = ref(true)
let filterTableData = ref()
let total = ref(0) // 总条数
const personalInformation = async () => {

  const res = await listPageManager(parameter.value)
  

  filterTableData.value = res.data.data.results
  total.value = res.data.data.count
  loading.value = false
  
}
personalInformation()

// 状态选项
const options = [
  {
    value: '0',
    label: '启用',
  },
  {
    value: '1',
    label: '禁用',
  },

]

// 人员添加信息成功后刷新列表
const onSuccess = () => {
  personalInformation()
}

// 修改人员状态操作
let handleStatusChange = async (value) => {
  try {
    await updateLoserManager(value.id,value.status)
    ElMessage({
      message: '修改成功',
      type: 'success',
    })
  } catch (e) {
    ElMessage({
      message: '修改失败',
      type: 'error',
    })
  }
}
// 删除人员操作
let managerIdArry = ref([])
// 删除方法
let deleteFun = () => {
  ElMessageBox.confirm('你确认要进行删除吗', '温馨提示', {
    type: 'warning',
    confirmButtonText: '确认',
    cancelButtonText: '取消'
  }).then(async () => {
    await deleteLoserManager(managerIdArry.value)
    personalInformation() //刷新列表
    ElMessage({
      type: 'success',
      message: '删除成功',
    })
    managerIdArry.value = [] //清空数组
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '删除失败',
    })
  })
}

// 单行删除
let deleteManager = (val) => {

  managerIdArry.value[0] = val.id

  deleteFun()
}

// 修改当前用户角色
let updateUserRole = (val) => {
  
  managerIdArry.value[0] = val.id
  
  deleteFun()
}

// 批量删除选择
let handleSelectionChange = (val) => {

  managerIdArry.value = [] //清空数组
  val.map((item) => {
    managerIdArry.value.push(item.id)
  })
}
// 分页操作
let onSizeChange = (size) => {
 
  parameter.value.page = 1
  parameter.value.size = size
  personalInformation()
}
let onCurrentChange = (page) => {
  

  parameter.value.page = page
  personalInformation()
}
</script>
<style lang="scss" scoped>
.manager-table {
  height: 62.5vh;
  overflow: auto;
}
</style>